<template>
    <div id='papersEdit'>
         <el-card>
    <div slot="header">
      <span>添加</span>
    </div>
    
    <el-form :model="formData" ref="formData" label-position="left" label-width="80px" :rules='rules'>
      <el-form-item label="标题" prop="title">
        <el-input v-model="formData.title" ></el-input>
      </el-form-item>
      <!-- 大纲管理 -->
      <el-form-item label="大纲">
        <el-tree default-expand-all node-key="id" ref='tree' @check-change='selectNode' show-checkbox :data="outlinesList" :props="{
          children:'children',label:'text'
        }"></el-tree>
      </el-form-item>
      <!-- 选项管理 -->
      <el-form-item label="选项">
        <el-select v-model="formData.item_id">
          <el-option v-for="item in itemsList" :key="'item'+item.id" :label="item.text" :value="item.id">
          </el-option>
        </el-select>
        <!-- 班级管理 -->
      </el-form-item>
      <el-form-item label="班级" prop="item">
        <el-select v-model="formData.classes_id">
          <el-option v-for="item in classesList" :key="'item'+item.id" :label="item.classname" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click='save'>保存</el-button>
      </el-form-item>
    </el-form>

  </el-card>
    </div>
</template>
<script>
export default {
  props: ["id"],
  data() {
    return {
    //   paperList: {},
      rules: {
        title: [
          {
            validator: (rules, value, callback) => {
              switch (true) {
                case value.trim() === "":
                  callback(new Error("不能为空"));
                  break;
                case !/^.{2,60}$/.test(value):
                  callback(new Error("2-60"));
                  break;
                default:
                  callback();
              }
            }
          }
        ]
      },
      classesList: [],
      outlinesList: [],
      itemsList: [],
      formData: {
        id:'',
        title: "",
        content: [],
        item_id: '',
        classes_id: ""
      }
    };
  },
  created() {
    this.getClassesList(),
    this.getOutlinesList(),
    this.getItemsList()
  },
  mounted(){
     this.getPaperList()
  },
  methods: {
     //保存选项
    save() {
      this.$http
        .post(
          "/papers/edit",
          this.$qs.stringify({
            id:this.formData.id,
            title: this.formData.title,
            classes_id: this.formData.classes_id,
            item_id: this.formData.item_id,
            content: JSON.stringify(this.formData.content)
          })
        )
        .then(result => {
          this.$router.push({ name: "paperlist" });
        });
    },
      //id数值
    getPaperList() {
      this.$http
        .get("/papers/one", { params: { id: this.id } })
        .then(result => {
          if (result.data.error == 4) {
            this.$router.push("/login");
          }
          result.data.data.item = JSON.parse(result.data.data.item);
          result.data.data.content = JSON.parse(result.data.data.content);
          this.paperList = result.data.data;
          this.formData.title=result.data.data.title;
          this.formData.id=result.data.data.id;
          this.formData.classes_id=+result.data.data.classes_id;
          this.formData.item_id=result.data.data.item_id;
          this.formData.content=result.data.data.content;
          var keys=result.data.data.content.map(el => {
            return el.id
          });
          this.$refs.tree.setCheckedKeys(keys)
        });
    },
    // 大纲选择节点插入
    selectNode(data, isSelect) {
      if (data.children.length > 0) {
        return;
      }
      if (isSelect) {
        this.formData.content.push(data);
      } else {
        var index = this.formData.content.indexOf(data);
        this.formData.content.splice(index, 1);
      }
    },
     // 班级管理
    getClassesList() {
      this.$http.get("/classes/list").then(result => {
        this.classesList = result.data.data;
      });
    },
    // 大纲管理
    getOutlinesList() {
      this.$http.get("/outlines/list").then(result => {
        this.outlinesList = this.$tree(result.data.data);
      });
    },
    // 选项管理
    getItemsList() {
      this.$http.get("/items/list").then(result => {
        this.itemsList = this.$tree(result.data.data);
      });
    },
   
  }
};
</script>
